<template>
	<view>
		<view class="switch-list-index display-flex">
			<view class="switch-list display-flex" v-for="(item, index) in list" :key="index"
				@click="addswitch(index)">
				<view class="switch-list-zh display-flex">
					<image :src="item.avatar"></image>
					<view class="switch-list-name">
						<view :class=" indexio == index ? 'states'  : '' ">{{ item.nick_name }}</view>
						<view>{{ item.mobile }}</view>
					</view>
				</view>
				<view class="switch-list-icon display-flex" v-if="indexio == index && translate">
					<u-icon name="/static/img/user/duigou.png" :size="30"></u-icon>
				</view>
				<view class="switch-list-icon display-flex" v-if="pplo" @click.stop="dellist(index)">
					<u-icon name="/static/img/user/shanchu.png" :size="30"></u-icon>
				</view>
			</view>
			<view class="switch-listi display-flex" @click="addinfo">
				<u-icon class="icon-3" name="/static/img/user/tianjia.png" :size="60"></u-icon>
				<view>添加或注册账号</view>
			</view>
		</view>
		<view class="p20 mt40">
			<button size="default" shape="circle" type="warning" style="background-color: #FF8200 !important; color: #fff;"
				class="fs32 primarybtn" @click="toLogout">退出登录</button>
		</view>
	</view>
</template>

<script>
	import { mapActions } from 'vuex'
	export default {
		data() {
			return {
				list: [],
				indexio: 0,
				pplo: false,
				translate: true,
				loginIndex: '',
				userInfo: {
					role: {},
					account: {}
				},
			}
		},
		onLoad() {
			this.getCenterInfo();
		},
		
		// 导航头部的按钮切换
		onNavigationBarButtonTap(e) {
			// #ifdef APP-PLUS
			if (e.text === '编辑') {
				e.text = '返回'
				let currentWebview = this.$scope.$getAppWebview();
				currentWebview.setTitleNViewButtonStyle(0, {
					text: "返回"
				})
				uni.setNavigationBarTitle({
					title: '删除账号'
				});
				this.pplo = true
				this.translate = false
			} else {
				let currentWebview = this.$scope.$getAppWebview();
				currentWebview.setTitleNViewButtonStyle(0, {
					text: "编辑"
				})
				uni.setNavigationBarTitle({
					title: '切换账号'
				});
				e.text = '编辑'
				this.pplo = false
				this.translate = true
			}
			// #endif

		},
		methods: {
			...mapActions(['getUser', 'LOGOUT']),
			addswitch(index) {
				//判断当前token是否还有效
				this.$u.post('member/api.passport/validateToken', {token: this.list[index].token}).then(res => {
					if(res.data.can_use === true) {
						this.indexio = index;
						this.app.setAuthCode(this.list[index].token);
						uni.redirectTo({
						    url: '/pages/user/user',
							fail: function(e) {
								if(e.errMsg == 'redirectTo:fail can not redirectTo a tabbar page') {
									uni.switchTab({
										url: '/pages/user/user',
										fail: function(e) {
											console.log(e);
										}
									})
								}
							}
						});
					} else {
						this.list.splice(index, 1);
						this.resetSyncAccount();
						this.$u.toast(res.data.msg);
					}
				});
			},
			// 添加账号
			addinfo() {
				uni.navigateTo({
					url: '/pages/login/login'
				})
			},
			// 退出登录
			toLogout() {
				// const vm = this
				uni.showModal({
				    content: '是否退出登录？',
				    confirmColor: this.themeColor,
				    success: ({ cancel }) => {
				        if (cancel) return
				        this.LOGOUT().then((res) => {
							uni.redirectTo({
								url: '/pages/login/login'
							})
				        })
				    }
				})
			},
			// 删除账号
			dellist(index) {
				var that = this;
				uni.showModal({
					content: '确定要删除么?',
					success: (e) => {
						if (e.confirm) {
							//删除服务的token
							uni.request({
							    url: this.config.baseUrl + 'index.php/member/api.passport/logout', 
								method: 'POST',
							    header: {
							        'token': this.list[index].token //自定义请求头信息
							    },
							    success: (res) => {
							        that.list.splice(index, 1);
									that.resetSyncAccount();
									if(that.list.length == 0) {
										
										let url = '/pages/login/login';
										uni.reLaunch({
											url: url,
											success: (res) => {
												that.app.setAuthCode('');
											}
										})
									} else {
										//删除的是否是当前登录账号 则登录第一个账号
										if(that.loginIndex == index) {
											that.app.setAuthCode(that.list[0].token);
										}
									}
							    },
								fail: (res) => {
									console.log(res)
								}
							});
						}
					}
				});
			},
			getAccount() {
				//获取本地缓存的账号
				this.list = uni.getStorageSync('user_account');
				console.log(this.list,'-------');
				for(let i = 0; i < this.list.length; i++) {
					if(this.list[i].token == this.app.getAuthCode()) {
						this.indexio = i;
						this.loginIndex = i;
					}
				}
			},
			resetSyncAccount() {
				uni.setStorageSync('user_account', this.list);
			},
			getCenterInfo() {
				//获取会员中心信息
				this.$u.post('member/api.center/getCenterInfo').then(res => {
					this.userInfo = res.data.userInfo;
					//获取本地缓存的账号
					let syncUserInfo = uni.getStorageSync('user_account');
					if(syncUserInfo == '') {
						syncUserInfo = [];
					}
					for(let i = 0; i < syncUserInfo.length; i++) {
						if(syncUserInfo[i].mobile == this.userInfo.mobile) {
							syncUserInfo.splice(i, 1);
						}
					}
					syncUserInfo.unshift({
						token: this.app.getAuthCode(),
						mobile: this.userInfo.mobile,
						nick_name: this.userInfo.nick_name,
						avatar: this.userInfo.headimgurl
					});
					uni.setStorageSync('user_account', syncUserInfo);
					
					this.getAccount();
				});
			},
		}
	}
</script>

<style lang="scss">
	.p20{
		padding: 20rpx !important;
	}
	.mt40{margin-top: 80rpx;}
	.fs32 {
	    font-size: 32rpx !important;
	}
	.display-flex {
		display: flex;
	}

	.switch-list-index {
		width: 700rpx;
		background-color: #fff;
		justify-content: space-between;
		flex-wrap: wrap;
		margin: 0 auto;
		margin-top: 30rpx;
		border-radius: 30rpx;
		padding-top: 15rpx;
	}

	.switch-listi {
		width: 670rpx;
		height: 100rpx;
		margin: 0 auto;
		margin-bottom: 10rpx;

		view {
			line-height: 100rpx;
		}
	}

	.switch-list {
		width: 670rpx;
		border-bottom: 1rpx solid #edebeb;
		margin: 0 auto;
		margin-bottom: 10rpx;
		justify-content: space-between;
		padding-bottom: 8rpx;

		.switch-list-zh {
			justify-content: center;
			align-items: center;

			image {
				width: 60rpx;
				height: 60rpx;
				border-radius: 50%;
				margin: 0 20rpx;
			}

			.switch-list-name {
				line-height: 40rpx;
				font-size: 22rpx;
				font-weight: 400;
				color: #d1d1d1;

				view:nth-child(1) {
					width: 400rpx;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
					color: #4b4b4b;
					font-size: 26rpx;
					font-weight: 500;
				}
			}

			.states {
				font-size: 28rpx !important;
				font-weight: 700 !important;
				color: #ff5500 !important;
			}
		}

	}

	.switch-list-icon {
		align-items: center;
		margin-right: 30rpx;
	}

	.icon-3 {
		margin: 0 20rpx 0;
		align-items: center;
	}
</style>